iOS GPUImage源码解读(一)

iOS GPUImage源码解读(一)
From: https://syxblog.com/2017/04/1884.html

GPUImage是iOS上一个基于OpenGL进行图像处理的开源框架，内置大量滤镜，架构灵活，可以在其基础上很轻松地实现各种图像处理功能。本文主要向大家分享一下项目的核心架构、源码解读及使用心得。

GPUImage有哪些特性

1.丰富的输入组件

摄像头、图片、视频、OpenGL纹理、二进制数据、UIElement(UIView, CALayer)

2.大量现成的内置滤镜（4大类）

1). 颜色类（亮度、色度、饱和度、对比度、曲线、白平衡…）

2). 图像类（仿射变换、裁剪、高斯模糊、毛玻璃效果…）

3). 颜色混合类（差异混合、alpha混合、遮罩混合…）

4). 效果类（像素化、素描效果、压花效果、球形玻璃效果…）

3.丰富的输出组件

UIView、视频文件、GPU纹理、二进制数据

4.灵活的滤镜链

滤镜效果之间可以相互串联、并联，调用管理相当灵活。

5.接口易用

滤镜和OpenGL资源的创建及使用都做了统一的封装，简单易用，并且内置了一个cache模块实现了framebuffer的复用。

6.线程管理

OpenGLContext不是多线程安全的，GPUImage创建了专门的contextQueue，所有的滤镜都会扔到统一的线程中处理。

7.轻松实现自定义滤镜效果

继承GPUImageFilter自动获得上面全部特性，无需关注上下文的环境搭建，专注于效果的核心算法实现即可。

基本用法

// 获取一张图片

效果如图：

整个框架的目录结构

核心架构

基本上每个滤镜都继承自GPUImageFilter；

而GPUImageFilter作为整套框架的核心；

接收一个GPUImageFrameBuffer输入；

调用GLProgram渲染处理；

输出一个GPUImageFrameBuffer；

把输出的GPUImageFrameBuffer传给通过targets属性关联的下级滤镜；

直到传递至最终的输出组件；

核心架构可以整体划分为三块：输入、滤镜处理、输出

接下来我们就深入源码，看看GPUImage是如何获取数据、传递数据、处理数据和输出数据的

获取数据

GPUImage提供了多种不同的输入组件，但是无论是哪种输入源，获取数据的本质都是把图像数据转换成OpenGL纹理。这里就以视频拍摄组件（GPUImageVideoCamera）为例，来讲讲GPUImage是如何把每帧采样数据传入到GPU的。

GPUImageVideoCamera里大部分代码都是对摄像头的调用管理，不了解的同学可以去学习一下AVFoundation（传送门）。摄像头拍摄过程中每一帧都会有一个数据回调，在GPUImageVideoCamera中对应的处理回调的方法为：

- (void)processVideoSampleBuffer:(CMSampleBufferRef)sampleBuffer;

iOS的每一帧摄像头采样数据都会封装成CMSampleBufferRef；CMSampleBufferRef除了包含图像数据、还包含一些格式信息、图像宽高、时间戳等额外属性；

摄像头默认的采样格式为YUV420，关于YUV格式大家可以自行搜索学习一下（传送门）：

YUV420按照数据的存储方式又可以细分成若干种格式，这里主要是kCVPixelFormatType_420YpCbCr8BiPlanarFullRange和kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange两种；

两种格式都是planar类型的存储方式，y数据和uv数据分开放在两个plane中；这样的数据没法直接传给GPU去用，GPUImageVideoCamera把两个plane的数据分别取出：

-
 (void)processVideoSampleBuffer:(CMSampleBufferRef)sampleBuffer { // 
一大坨的代码用于获取采样数据的基本属性（宽、高、格式等等） ...... if ([GPUImageContext 
supportsFastTextureUpload] && captureAsYUV) { 
CVOpenGLESTextureRef luminanceTextureRef = ; CVOpenGLESTextureRef 
chrominanceTextureRef = ; if (CVPixelBufferGetPlaneCount(cameraFrame) 
> 0) // Check for YUV planar inputs to do RGB conversion {

注意CVOpenGLESTextureCacheCreateTextureFromImage中对于internalFormat的设置；

通常我们创建一般纹理的时候都会设成GL_RGBA，传入的图像数据也会是rgba格式的；

而这里y数据因为只包含一个通道，所以设成了GL_LUMINANCE（灰度图）；

uv数据则包含2个通道，所以设成了GL_LUMINANCE_ALPHA（带alpha的灰度图）；

另外uv纹理的宽高只设成了图像宽高的一半，这是因为yuv420中，每个相邻的2x2格子共用一份uv数据；

数据传到GPU纹理后，再通过一个颜色转换(yuv->rgb)的shader（shader是OpenGL可编程着色器，可以理解为GPU侧的代码，关于shader需要一些OpenGL编程基础（传送门）），绘制到目标纹理：

 // fullrange varying highp vec2 textureCoordinate; uniform sampler2D 
luminanceTexture; uniform sampler2D chrominanceTexture; uniform mediump 
mat3 colorConversionMatrix; void main { mediump vec3 yuv; lowp vec3 rgb;
 yuv.x = texture2D(luminanceTexture, textureCoordinate).r; yuv.yz = 
texture2D(chrominanceTexture, textureCoordinate).ra - vec2(0.5, 0.5); 
rgb = colorConversionMatrix * yuv; gl_FragColor = vec4(rgb, 1); }


 // videorange varying highp vec2 textureCoordinate; uniform sampler2D 
luminanceTexture; uniform sampler2D chrominanceTexture; uniform mediump 
mat3 colorConversionMatrix; void main { mediump vec3 yuv; lowp vec3 rgb;
 yuv.x = texture2D(luminanceTexture, textureCoordinate).r - 
(16.0/255.0); yuv.yz = texture2D(chrominanceTexture, 
textureCoordinate).ra - vec2(0.5, 0.5); rgb = colorConversionMatrix * 
yuv; gl_FragColor = vec4(rgb, 1); }

注意yuv420fullrange和yuv420videorange的数值范围是不同的，因此转换公式也不同，这里会有2个颜色转换shader，根据实际的采样格式选择正确的shader；

渲染输出到目标纹理后就得到一个转换成rgb格式的GPU纹理，完成了获取输入数据的工作；

传递数据

GPUImage的图像处理过程，被设计成了滤镜链的形式；输入组件、效果滤镜、输出组件串联在一起，每次推动渲染的时候，输入数据就会按顺序传递，经过处理，最终输出。

GPUImage设计了一个GPUImageInput协议，定义了GPUImageFilter之间传入数据的方法：

-
 (void)setInputFramebuffer:(GPUImageFramebuffer *)newInputFramebuffer 
atIndex:(NSInteger)textureIndex { firstInputFramebuffer = 
newInputFramebuffer; [firstInputFramebuffer lock]; }

firstInputFramebuffer属性用来保存输入纹理；

GPUImageFilter作为单输入滤镜基类遵守了GPUImageInput协议，GPUImage还提供了GPUImageTwoInputFilter, GPUImageThreeInputFilter等多输入filter的基类。

这里还有一个很重要的入口方法用于推动数据流转：

-
 (void)newFrameReadyAtTime:(CMTime)frameTime 
atIndex:(NSInteger)textureIndex { ...... [self 
renderToTextureWithVertices:imageVertices textureCoordinates:[[self 
class] textureCoordinatesForRotation:inputRotation]]; [self 
informTargetsAboutNewFrameAtTime:frameTime]; }

每个滤镜都是由这个入口方法开始启动，这个方法包含2个调用

1). 首先调用render方法进行效果渲染

2). 调用informTargets方法将渲染结果推到下级滤镜

GPUImageFilter继承自GPUImageOutput，定义了输出数据，向后传递的方法：

- (void)notifyTargetsAboutNewOutputTexture;

但是这里比较奇怪的是滤镜链的传递实际并没有用notifyTargets方法，而是用了前面提到的informTargets方法：

-
 (void)informTargetsAboutNewFrameAtTime:(CMTime)frameTime { ...... // 
Get all targets the framebuffer so they can grab a lock on it for 
(id<GPUImageInput> currentTarget in targets) { if (currentTarget 
!= self.targetToIgnoreForUpdates) { NSInteger indexOfObject = [targets 
indexOfObject:currentTarget]; NSInteger textureIndex = 
[[targetTextureIndices objectAtIndex:indexOfObject] integerValue]; [self
 setInputFramebufferForTarget:currentTarget atIndex:textureIndex]; 
[currentTarget setInputSize:[self outputFrameSize] 
atIndex:textureIndex]; } } ...... // Trigger processing last, so that 
our unlock comes first in serial execution, avoiding the need for a 
callback for (id<GPUImageInput> currentTarget in targets) { if 
(currentTarget != self.targetToIgnoreForUpdates) { NSInteger 
indexOfObject = [targets indexOfObject:currentTarget]; NSInteger 
textureIndex = [[targetTextureIndices objectAtIndex:indexOfObject] 
integerValue]; [currentTarget newFrameReadyAtTime:frameTime 
atIndex:textureIndex]; } } }

GPUImageOutput定义了一个targets属性来保存下一级滤镜，这里可以注意到targets是个数组，因此滤镜链也支持并联结构。可以看到这个方法主要做了2件事情：

1). 对每个target调用setInputFramebuffer方法把自己的渲染结果传给下级滤镜作为输入

2). 对每个target调用newFrameReadyAtTime方法推动下级滤镜启动渲染

滤镜之间通过targets属性相互衔接串在一起，完成了数据传递工作。

处理数据

前面提到的renderToTextureWithVertices:方法便是每个滤镜必经的渲染入口。每个滤镜都可以设置自己的shader，重写该渲染方法，实现自己的效果：

-
 (void)renderToTextureWithVertices:(const GLfloat *)vertices 
textureCoordinates:(const GLfloat *)textureCoordinates { ...... 
[GPUImageContext setActiveShaderProgram:filterProgram]; 
outputFramebuffer = [[GPUImageContext sharedFramebufferCache] 
fetchFramebufferForSize:[self sizeOfFBO] 
textureOptions:self.outputTextureOptions onlyTexture:NO]; 
[outputFramebuffer activateFramebuffer]; ...... [self 
setUniformsForProgramAtIndex:0]; glClearColor(backgroundColorRed, 
backgroundColorGreen, backgroundColorBlue, backgroundColorAlpha); 
glClear(GL_COLOR_BUFFER_BIT); glActiveTexture(GL_TEXTURE2); 
glBindTexture(GL_TEXTURE_2D, [firstInputFramebuffer texture]); 
glUniform1i(filterInputTextureUniform, 2); 
glVertexAttribPointer(filterPositionAttribute, 2, GL_FLOAT, 0, 0, 
vertices); glVertexAttribPointer(filterTextureCoordinateAttribute, 2, 
GL_FLOAT, 0, 0, textureCoordinates); glDrawArrays(GL_TRIANGLE_STRIP, 0, 
4); ...... }

上面这个是GPUImageFilter的默认方法，大致做了这么几件事情：

1). 向frameBufferCache申请一个outputFrameBuffer

2). 将申请得到的outputFrameBuffer激活并设为渲染对象

3). glClear清除画布

4). 设置输入纹理

5). 传入顶点

6). 传入纹理坐标

7). 调用绘制方法

再来看看GPUImageFilter使用的默认shader：

 // vertex shader attribute vec4 position; attribute vec4 
inputTextureCoordinate; varying vec2 textureCoordinate; void main { 
gl_Position = position; textureCoordinate = inputTextureCoordinate.xy; }


 // fragment shader varying highp vec2 textureCoordinate; uniform 
sampler2D inputImageTexture; void main { gl_FragColor = 
texture2D(inputImageTexture, textureCoordinate); }

这个shader实际上啥也没做，VertexShader（顶点着色器）就是把传入的顶点坐标和纹理坐标原样做光栅化处理，FragmentShader（片段着色器）就是从纹理取出原始色值直接输出，最终效果就是把图片原样渲染到画面。

输出数据

比较常用的主要是GPUImageView和GPUImageMovieWriter。

GPUImageView继承自UIView，用于实时预览，用法非常简单

1). 创建GPUImageView

2). 串入滤镜链

3). 插到视图里去

UIView的contentMode、hidden、backgroundColor等属性都可以正常使用

里面比较关键的方法主要有这么2个：

// 申明自己的CALayer为CAEAGLLayer+ (Class)layerClass { return [CAEAGLLayer class]; }

-
 (void)createDisplayFramebuffer { [GPUImageContext 
useImageProcessingContext]; glGenFramebuffers(1, 
&displayFramebuffer); glBindFramebuffer(GL_FRAMEBUFFER, 
displayFramebuffer); glGenRenderbuffers(1, &displayRenderbuffer); 
glBindRenderbuffer(GL_RENDERBUFFER, displayRenderbuffer); 
[[[GPUImageContext sharedImageProcessingContext] context] 
renderbufferStorage:GL_RENDERBUFFER 
fromDrawable:(CAEAGLLayer*)self.layer]; GLint backingWidth, 
backingHeight; glGetRenderbufferParameteriv(GL_RENDERBUFFER, 
GL_RENDERBUFFER_WIDTH, &backingWidth); 
glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT, 
&backingHeight); ...... glFramebufferRenderbuffer(GL_FRAMEBUFFER, 
GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, displayRenderbuffer); ...... }

创建frameBuffer和renderBuffer时把renderBuffer和CALayer关联在一起；这是iOS内建的一种GPU渲染输出的联动方法；

这样newFrameReadyAtTime渲染过后画面就会输出到CALayer。

GPUImageMovieWriter主要用于将视频输出到磁盘；

里面大量的代码都是在设置和使用AVAssetWriter，不了解的同学还是得去看AVFoundation；

这里主要是重写了newFrameReadyAtTime:方法：

-
 (void)newFrameReadyAtTime:(CMTime)frameTime 
atIndex:(NSInteger)textureIndex { ...... GPUImageFramebuffer 
*inputFramebufferForBlock = firstInputFramebuffer; glFinish; 
runAsynchronouslyOnContextQueue(_movieWriterContext, ^{ ...... // Render
 the frame with swizzled colors, so that they can be uploaded quickly as
 BGRA frames [_movieWriterContext useAsCurrentContext]; [self 
renderAtInternalSizeUsingFramebuffer:inputFramebufferForBlock]; 
CVPixelBufferRef pixel_buffer = ; if ([GPUImageContext 
supportsFastTextureUpload]) { pixel_buffer = renderTarget; 
CVPixelBufferLockBaseAddress(pixel_buffer, 0); } else { CVReturn status =
 CVPixelBufferPoolCreatePixelBuffer (, [assetWriterPixelBufferInput 
pixelBufferPool], &pixel_buffer); if ((pixel_buffer == ) || (status 
!= kCVReturnSuccess)) { CVPixelBufferRelease(pixel_buffer); return; } 
else { CVPixelBufferLockBaseAddress(pixel_buffer, 0); GLubyte 
*pixelBufferData = (GLubyte *)CVPixelBufferGetBaseAddress(pixel_buffer);
 glReadPixels(0, 0, videoSize.width, videoSize.height, GL_RGBA, 
GL_UNSIGNED_BYTE, pixelBufferData); } } ......

这里有几个地方值得注意：

1). 在取数据之前先调了一下glFinish，CPU和GPU之间是类似于client-server的关系，CPU侧调用OpenGL命令后并不是同步等待OpenGL完成渲染再继续执行的，而glFinish命令可以确保OpenGL把队列中的命令都渲染完再继续执行，这样可以保证后面取到的数据是正确的当次渲染结果。

2). 取数据时用了supportsFastTextureUpload判断，这是个从iOS5开始支持的一种CVOpenGLESTextureCacheRef和CVImageBufferRef的映射（映射的创建可以参看获取数据中的

CVOpenGLESTextureCacheCreateTextureFromImage），通过这个映射可以直接拿到CVPixelBufferRef而不需要再用glReadPixel来读取数据，这样性能更好。

最后归纳一下本文涉及到的知识点

1. AVFoundation

摄像头调用、输出视频都会用到AVFoundation

1. YUV420

视频采集的数据格式

1. OpenGL shader

GPU的可编程着色器

1. CAEAGLLayer

iOS内建的GPU到屏幕的联动方法

1. fastTextureUpload

iOS5开始支持的一种CVOpenGLESTextureCacheRef和CVImageBufferRef的映射